<template>
  <div class="customer-service">
    <titleBar titleText="客服支持" :hasBottomBorder="true"></titleBar>
    <div class="list-wraper">
      <div class="service-item" v-for="item in serviceList" :key="item.name">
        <p>{{ item.name }} :</p>
        <el-button type="text" size="small" @click="lookDetail(item)"
          >查看</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import titleBar from '@/moduleComponents/newWorkbench/titleBar'
import ellipsisForText from '@/moduleComponents/newWorkbench/ellipsisForText'
import {AcOverallStructureorkbenchTable} from '@const/api_authCenter.js'
export default {
  name: 'customerService',
  components: {
    titleBar,
    ellipsisForText
  },
  data() {
    return {
      serviceList: []
    }
  },
  created() {
    this.getServiceList()
  },
  methods: {
    getServiceList() {
      this.$axios({
        url: AcOverallStructureorkbenchTable,
        method: 'post'
      })
        .then(res => {
          this.serviceList = res.data.payload || []
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 查看
    lookDetail({value}) {
      this.$router.push({
        path: '/newWorkbench/customerSupportList',
        query: {
          tabKey: value
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.list-wraper {
  padding: 0 5px;
  box-sizing: border-box;
  max-height: 280px;
  overflow: auto;
}

.service-item {
  display: flex;
  justify-content: space-between;
  p {
    padding: 8px 0;
  }
}
</style>
